<template>
	<view>
		<fa-navbar title="资产处置"></fa-navbar>
		<scroll-view class="pb-6" scroll-y="true">
			<view class="pb-4">
				<u-gap height="40" bg-color="#F6F8FB"></u-gap>
				<view class="pl-1 mt-30">
					<view class="h2-font">选择处置类型</view>
					<view class="h3-font-light-gray mt-m1">选择以下处置类型，资产将从房产中移除</view>
				</view>
				<view class="pl-1 pr-1 mt-m2 flex-between-center">
					<view v-for="(item,index) in list.slice(0,3)" :key="item.id" :class="['item-bg' ,item.check ?  'active-item-bg': '']"
					 @click="gridItem(item)">
						<u-icon v-if="item.check === true" :name="item.actSrc" :size="46"></u-icon>
						<u-icon v-else :name="item.src" :size="46"></u-icon>
						<text class="ml-m2">{{item.name}}</text>
					</view>
				</view>
				<view class="pl-1 pr-1 mt-1 flex-between-center">
					<view v-for="(item,index) in list.slice(3,5)" :key="item.id" :class="['item-bg' ,item.check ?  'active-item-bg': '']" @click="gridItem(item)">
						<u-icon v-if="item.check === true" :name="item.actSrc" :size="46"></u-icon>
						<u-icon v-else :name="item.src" :size="46"></u-icon>
						<text class="ml-m2">{{item.name}}</text>
					</view>
					<view class="empty-item-bg"></view>
				</view>
				<view v-if="!cuOrgGuid && !TransferState && (!alarmGuids || alarmGuids.length === 0)" class="pl-1 mt-m2 mb-m2">
					<view class="mb-m2">选择转移，资产需要从当前房产转移至目标房产</view>
					<view :class="['item-bg' ,list[5].check ?  'active-item-bg': '']" @click="gridItem(list[5])">
						<u-icon v-if="list[5].check === true" :name="list[5].actSrc" :size="46"></u-icon>
						<u-icon v-else :name="list[5].src" :size="46"></u-icon>
						<text class="ml-m2">{{list[5].name}}</text>
					</view>
				</view>
				<view v-if="HandleType == 'ASSET_HANDLE_0005'" class="pl-1 pr-1 h3-font">
					<view>
						<view class="flex-start height-104">
							<view class="m-col6">当前所属房产</view>
							<view>{{OrgName}}</view>
						</view>
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
					<view class="flex-between-center height-104">
						<view class="m-col6">目标房产</view>
						<u-input v-model="houseCategory" :disabled="true" placeholder="请选择房产" @click="chooseAssets" />
						<fa-icon name="icon-Right" color="#bfbfbf" size="40" />
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
					<view class="flex-between-center height-104">
						<view class="m-col6">转移时间</view>
						<u-input :disabled="true" :select-open="timeSelectShow" v-model="timeCategory" placeholder="请选择时间" @click="timeSelectShow = true"></u-input>
						<fa-icon name="icon-Right" color="#bfbfbf" size="40" />
					</view>
					<u-gap height="1" bg-color="#F6F8FB"></u-gap>
				</view>
				<view>
					<view class="flex-start height-104 h3-font pl-1 pr-1">
						<view class="m-col6">备注</view>
						<u-input v-model="remarksValue" placeholder="请输入30个字符以内,非必填" maxlength="30" />
					</view>
				</view>
				<view>
					<u-gap height="40" bg-color="#F6F8FB"></u-gap>
					<view class="pl-1 height-80 flex-start h1-font">资产信息</view>
					<u-gap height="5" bg-color="#F6F8FB"></u-gap>
					<view class="ml-2 mr-2">
						<view class="flex-start h5-font-light-gray height-80">{{EpcId}}</view>
						<u-gap height="5" bg-color="#F6F8FB"></u-gap>
						<view class="mt-1 flex-start">
							<image v-if="Pics.length > 0" class="image-asset" :src="Pics[0].Url"></image>
							<image v-else class="image-asset" src="/static/images/nopic.png"></image>
							<view class="image-asset ml-1" style="width: 600rpx">
								<view class="h3-font">{{Name}}</view>
								<view class="h4-font-light-gray mt-m1">{{OrgName}}</view>
								<view class="flex-between h4-font-light-gray mt-m1">
									<view>{{TypeText}}</view>
									<view>{{Num || '1件'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-select mode="single-column" :list="timeSelectList" v-model="timeSelectShow" @confirm="selectTimeConfirm"></u-select>
			</view>
		</scroll-view>
		<view class="bottom-layout p-2">
			<u-button shape="circle" @click="toggleMessage" 
			:type="!formValid2 ? 'default' : 'primary'" class="btn-grad" :class="formValid2 ? '' : 'btn-disable2'">确认处置</u-button>
		</view>
		<u-modal v-model="modal.show" :content="modal.content" :title="modal.title" show-cancel-button cancel-text="再想想"
		 @confirm="modal.confirm"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	export default {
		components: {
			faNavbar,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				houseCategory: "",
				houseOrgGuid: "",
				timeSelectShow: false,
				timeCategory: "1天",
				timeValue: "1",
				timeSelectList: [{
						value: '1',
						label: '1天'
					},
					{
						value: '2',
						label: '2天'
					},
					{
						value: '3',
						label: '3天'
					},
					{
						value: '4',
						label: '4天'
					},
					{
						value: '5',
						label: '5天'
					}
				],
				list: [{
						id: 0,
						name: '变卖',
						type: "ASSET_HANDLE_0001",
						src: "/static/images/asset-handle-sell-off.svg",
						actSrc: "/static/images/asset-handle-sell-off-active.svg",
						check: false
					},
					{
						id: 1,
						name: '赠送',
						type: "ASSET_HANDLE_0002",
						src: "/static/images/asset-handle-give.svg",
						actSrc: "/static/images/asset-handle-give-active.svg",
						check: false
					},
					{
						id: 2,
						name: '报废',
						type: "ASSET_HANDLE_0003",
						src: "/static/images/asset-handle-useless.svg",
						actSrc: "/static/images/asset-handle-useless-active.svg",
						check: false
					},
					{
						id: 3,
						name: '丢失',
						type: "ASSET_HANDLE_0004",
						src: "/static/images/asset-handle-missing.svg",
						actSrc: "/static/images/asset-handle-missing-active.svg",
						check: false
					},
					{
						id: 4,
						name: '其他',
						type: "ASSET_HANDLE_0006",
						src: "/static/images/asset-handle-other.svg",
						actSrc: "/static/images/asset-handle-other-active.svg",
						check: false
					},
					{
						id: 5,
						name: '转移',
						type: "ASSET_HANDLE_0005",
						src: "/static/images/asset-handle-transfer.svg",
						actSrc: "/static/images/asset-handle-transfer-active.svg",
						check: false
					}
				],
				type: 'center',
				HandleType: undefined,
				message: undefined,
				value: undefined,
				title: undefined,
				Guid: undefined,
				EpcId: undefined,
				Name: undefined,
				Type: undefined,
				TypeText: undefined,
				OrgGuid: undefined,
				OrgName: undefined,
				Description: "",
				Pics: [{
					"Guid": undefined,
					"AssetGuid": undefined,
					"Url": undefined
				}],
				Num: undefined,
				remarksValue: undefined,
				HandleGuid: undefined,
				cuOrgGuid: undefined,
				TransferState: undefined,
				TransferHandleGuid: "",
				alarmGuids: [],
				modal: {
					title: "提示",
					show: false,
					content: "",
					cancel: () => {
						this.modal.show = false
					},
					confirm: () => {
						this.modal.show = false
					}
				},
				alarmGuid: ""
			}
		},
		onLoad(options) {
			this.Guid = options.guid;
			this.alarmGuid = options.alarmGuid;
			if (options.hasOwnProperty("cuOrgGuid")) {
				this.cuOrgGuid = options.cuOrgGuid
			}
			this.getAssetDetail(this.Guid)
			uni.$on('onChooseAssets', choose => {
				this.houseOrgGuid = choose.ID;
				this.houseCategory = choose.OrgName;
			});
			this.TransferHandleGuid = options.handleGuid;
		},
		onUnload() {
			uni.$off('onChooseAssets')
		},
		computed: {
			// 表单检验
			formValid2() {
				// return true;
				return this.HandleType != 'ASSET_HANDLE_0005' && this.HandleType || this.HandleType == 'ASSET_HANDLE_0005' && this.houseCategory != ''
			}
		},
		methods: {
			gridItem(selectItem) {
				this.houseCategory = '';
				this.HandleType = undefined;
				this.list.forEach(item => {
					if (item.id === selectItem.id) {
						item.check = true;
						this.HandleType = selectItem.type;
					} else {
						item.check = false;
					}
				})
			},

			// 选择时间类型回调
			selectTimeConfirm(e) {
				this.timeCategory = '';
				e.map((val, index) => {
					this.timeCategory = val.label;
					this.timeValue = val.value;
				})
			},

			quickhandle() {
				let params = {
					"Describe": this.remarksValue,
					"OrgGuid": this.OrgGuid,
					"TargetOrgGuid": this.houseOrgGuid,
					"HandleType": this.HandleType,
					"DayLimit": this.timeValue,
					"TransferHandleGuid": this.TransferHandleGuid,
					"AssetGuids": [
						this.Guid
					]
				}
				if (this.alarmGuid) {
					params.AlarmGuid = this.alarmGuid;
				}
				this.$api.quickhandle(params)
					.then(res => {
						if (res.code === 0) {
							if (this.HandleType == "ASSET_HANDLE_0005") {
								this.HandleGuid = res.data
								this.toAssetTransferApplyForResult()
							} else {
								this.toAssetHandleSuccess()
							}
						}
					})
					.catch(err => console.error(err));
			},

			// 获取家庭资产详情
			getAssetDetail(guid) {
				let params = {
					ID: guid
				}
				this.$api.getAssetDetail(params)
					.then(res => {
						if (res.code === 0) {
							this.assetDetail = res;
							this.Guid = res.data.Guid
							this.EpcId = res.data.EpcId
							this.Name = res.data.Name
							this.Type = res.data.Type
							this.TypeText = res.data.TypeText
							this.OrgGuid = res.data.OrgGuid
							this.OrgName = res.data.OrgName
							this.Description = res.data.Description
							this.Pics = res.data.Pics
							this.Num = res.data.Num
							this.TransferState = res.data.TransferState
							this.alarmGuids = res.data.AlarmGuids
						}
					})
					.catch(err => console.error(err));
			},

			toggleMessage() {
				if (this.HandleType == undefined) {
					return uni.showToast({
						title: '请选择处置资产类型',
						icon: 'none'
					})
				} else if (this.HandleType == "ASSET_HANDLE_0005") {
					if (!this.formValid()) {
						return uni.showToast({
							title: '请选择处置目标房产',
							icon: 'none'
						})
					}
					this.modal.title = '确认转移？'
					this.modal.content = '确认后请将资产转移至目标房产中'
				} else {
					this.modal.title = '确认处置？'
					this.modal.content = '处置后资产将从该房产中移除，无法恢复'
				}
				this.modal.confirm = () => {
					if (this.HandleType != undefined) {
						this.quickhandle();
					} else {
						this.$refs.uToast.show({
							title: '请选择处置资产类型',
						})
					}
				};
				this.modal.show = true;
			},
			
			// 表单检验
			formValid() {
				return this.houseOrgGuid.length > 0
			},
			
				// 选择房产
			chooseAssets() {
				let url = "../manage/chooseAssets/chooseAssets";
				if (this.OrgGuid) {
				    url += `?selectedId=${this.OrgGuid}`;
				}
				uni.navigateTo({url});
			},
			
			toAssetTransferApplyForResult() {
				uni.redirectTo({
					url: `/pages/handle/itemAssetTransferApplyForResult?handleGuid=${this.HandleGuid}&guid=${this.Guid}`
				})
			},
			toAssetHandleSuccess() {
				uni.redirectTo({
					url: '/pages/handle/itemAssetHandleSuccess'
				})
			},
		}
	}
</script>

<style lang="scss">
	.empty-item-bg {
		width: 210rpx;
		height: 100rpx;
	}

	.image-asset {
		width: 128rpx;
		height: 128rpx;
	}

	.item-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210rpx;
		height: 100rpx;
		background-color: #F6F8FB !important;
		color: #000000 !important;
		font-size: 28rpx
	}

	.active-item-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210rpx;
		height: 100rpx;
		background-color: #ECF4FF !important;
		color: #2E73E5 !important;
		font-size: 28rpx
	}

	.btn {
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
		color: white;
	}

	.bottom-layout {
		width: 100%;
		// height: 120rpx;
		border-top-style: 1rpx solid;
		background-color: #FFFFFF;
		bottom: 0; //可以更改为自己的需求距离底部的长度
		position: fixed;

		.operated-record-hove {
			color: #2E73E5;
		}
	}
</style>
